<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 22:23:28
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:04:14
 * @FilePath: \kgantt\core\components\taskitem\project\Project.vue
 * @Description: 
-->
<template>
  <g :tabindex="0" class="kgantt-projectWrapper">
    <rect
      :fill="barColor"
      :x="task.x1"
      :width="projectWith"
      :y="task.y"
      :height="task.height"
      :rx="task.barCornerRadius"
      :ry="task.barCornerRadius"
      class="kgantt-projectBackground"
    />
    <rect
      :x="task.progressX"
      :width="task.progressWidth"
      :y="task.y"
      :height="task.height"
      :ry="task.barCornerRadius"
      :rx="task.barCornerRadius"
      :fill="processColor"
    />
    <rect
      :fill="barColor"
      :x="task.x1"
      :width="projectWith"
      :y="task.y"
      :height="task.height / 2"
      :rx="task.barCornerRadius"
      :ry="task.barCornerRadius"
      class="kgantt-projectTop"
    />
    <polygon
      class="kgantt-projectTop"
      :points="projectLeftTriangle"
      :fill="barColor"
    />
    <polygon
      class="kgantt-projectTop"
      :points="projectRightTriangle"
      :fill="barColor"
    />
  </g>
</template>
<script lang="ts" setup>
import { onMounted, PropType, ref, watch } from "vue";
import { BarTask } from "../../../types/barTask";

const props = defineProps({
  task: {
    type: Object as PropType<BarTask>,
    default: {},
  },
  isProgressChangeable: {
    type: Boolean,
    default: false,
  },
  isDateChangeable: {
    type: Boolean,
    default: false,
  },
  isSelected: {
    type: Boolean,
    default: false,
  },
  rtl: {
    type: Boolean,
    default: false,
  },
});
defineEmits(["onEventStart"]);
const barColor = ref(
  props.isSelected
    ? props.task.styles.backgroundSelectedColor
    : props.task.styles.backgroundColor
);
const processColor = ref(
  props.isSelected
    ? props.task.styles.progressSelectedColor
    : props.task.styles.progressColor
);
const projectWith = ref(props.task.x2 - props.task.x1);

const projectLeftTriangle = ref("");
const projectRightTriangle = ref("");
const updateTriangle = () => {
  projectLeftTriangle.value = [
    props.task.x1,
    props.task.y + props.task.height / 2 - 1,
    props.task.x1,
    props.task.y + props.task.height,
    props.task.x1 + 15,
    props.task.y + props.task.height / 2 - 1,
  ].join(",");
  projectRightTriangle.value = [
    props.task.x2,
    props.task.y + props.task.height / 2 - 1,
    props.task.x2,
    props.task.y + props.task.height,
    props.task.x2 - 15,
    props.task.y + props.task.height / 2 - 1,
  ].join(",");
};
watch(
  () => props.task,
  () => {
    projectWith.value = props.task.x2 - props.task.x1;
    updateTriangle();
  }
);
onMounted(() => {
  updateTriangle();
});
</script>